<template>
    <div class="search-box" >
        <div class="icon-search">
            <input type="text" class="box" :placeholder="placeholder" v-model="query">
            <i class="icon-dismiss" v-show="query" @click="clear"></i>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations} from "vuex"
export default {
   props:{
       placeholder:{
         type:String,
         default:"搜索歌曲、歌手"
       }
   },
   computed:{
      query:{
          get(){
              return this.$store.state.query
          },
          set(query){
            this.setquery(query)
          }
      }
   },
   methods:{
      clear(){
          this.query=""
      },
      ...mapMutations(["setquery"])
   }
}
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable';
.search-box{
    display:flex
    align-items center
    box-sizing border-box
    margin:6px 6px 0px 6px
    height 45px
    border-radius 3px
    background #ebebeb
    color #7e7f80
    padding-left 10px
    font-size 20px
    padding-top 5px
    .icon-search{
        font-size:24px
        position relative
    }
    .box{
        flex 1
        margin 0 5px
        line-height 30px
        background #ebebeb
        color #bc433a
        font-size 14px
        vertical-align middle
        width 280px
        margin-top:-5px;
        padding-left 5px
        outline none
        &::placeholder{
            color #ecaeaa
        }
    }
    .icon-dismiss{
        font-size 14px
        color #cfcfd0
        position absolute
        top 4px
        left 328px
    }
}
</style>


